<template>
  <div class="body">
    <header class="header">
      <div class="title">
        <img src="../../../assets/images/01_11.png" alt="" class="img_zuo" @click="toback" />
        <div>隐患整改</div>
      </div>
    </header>
    <div class="contant">
      <div class="security" v-if="ids === 0 || ids === undefined || ids === null">
        <div class="xuncont">
          <p>巡查内容</p>
        </div>
        <div class="boxitem">
          <textarea class="actives" v-model="datas.noweInfo.title" maxlength="500" ref="count"></textarea>
        </div>
        <div class="yuyin_list chakan" v-if="datas.noweInfo.contract !== ''">
          <div class="ly_play2" data-url="" @click="play">
            <div>
              <span class="ly">
                <img v-show="isPlay" src="../../../assets/images/play_dt.gif" />
                <img v-show="!isPlay" src="../../../assets/images/play.png" />
                <span
                  class="ly_s2">{{ datas.noweInfo&&datas.noweInfo.contractime !== "" ? datas.noweInfo.contractime : '0"' }}</span>
              </span>
            </div>
          </div>
        </div>
        <div class="lists lists1">
          <ul class="lists imgs_ul imgs_ul-list" v-if="datas.noweInfo.imgurl !== ''">
            <li class="img-li" v-for="(items, indexs) in datas.noweInfo.imgurl.split(',')" :key="indexs">
              <div class="img-box-main">
                <div class="img-box-list">
                  <img :src="show_path + items" alt="" class="imgs">
                </div>
                <div class="imglist-title">{{ datas.noweInfo.imgText.split(',')[indexs] }}</div>
              </div>
            </li>
          </ul>
          <ul class="video-box" v-if="datas.noweInfo.videourl !== ''">
            <li class="video-list" v-for="(obj,i) of videoList" :key="i">
              <video controls>
                <source :src="show_path+obj" type="video/mp4">
                <source :src="show_path+obj" type="video/ogg">
                您的浏览器不支持Video标签。
              </video>
            </li>
          </ul>
        </div>
      </div>
      <div class="security">
        <div class="xuncont">
          <p>整改内容</p>
        </div>
        <div class="boxitem">
          <textarea placeholder="请描述内容(500字以内)" v-model="txtbxnr" maxlength="500" ref="count"></textarea>
        </div>
        <div class="ly_tc">
          <img src="../../../assets/images/ly_dt.gif" alt="" />
        </div>
        <div class="yuyin_list luru">
          <div class="ly_start">
            <span class="ly">
              <img src="../../../assets/images/mkf.png" />
              <span>按住说话</span>
            </span>
          </div>
          <div class="ly_play" data-url="">
            <div>
              <span class="ly">
                <img src="../../../assets/images/play.png" />
                <span
                  class="ly_s">{{ datas.rectificaContent&&datas.rectificaContent.contractime !== "" ? datas.rectificaContent.contractime : '0"' }}</span>
              </span>
              <img class="del_ly" src="../../../assets/images/delete.png" @click="clickDelete" />
              <img class="zhuan" src="../../../assets/images/zhuan.png" />
            </div>
          </div>
        </div>
        <ul class="img-box img_upload">
          <div class="img-item radius-m" @click="showPop"></div>
        </ul>
        <ul class="img-box imgs_ul" v-show="list_img.length > 0" :class="list_img.length > 0 ? 'imgs_uls' : ''">
          <li class="img-item radius-m img-list" :class="{'show-desc':obj.showDesc}" v-for="(obj,i) of list_img"
            :key="i">
            <div class="img-content">
              <img class="img-src img_tu" :src="show_path + obj.imgs" />
              <div class="img-group">
                <div class="img-btn">
                  <div class="del-btn" @click.stop="del(i,'img')">X</div>
                </div>
                <div class="img-btn">
                  <div class="desc-btn" @click.stop="showDesc(i)">A</div>
                </div>
              </div>
            </div>
            <input class="img-desc" type="text" :style="i === number ? 'display: block;' : ''" @click.stop="stopMP"
              @input="changeS(i)" placeholder="请输入描述" v-model="imgText[i]" />
          </li>
        </ul>
        <ul class="video-list" v-for="(obj,i) of list_mv">
          <video controls>
            <source :src="show_path+obj.video" type="video/mp4">
            <source :src="show_path+obj.video" type="video/ogg">
            您的浏览器不支持Video标签。
          </video>
          <div class="del" @click.stop="del(i,'mv')"><img src="../../../assets/images/delete.png" /></div>
        </ul>
      </div>
      <div style="box-sizing: border-box;padding: 10px;background-color: white">
        <!--        <div class="button" @click="submit">结束巡查</div>-->
        <div class="button" @click="submit">确定</div>
      </div>
    </div>
    <div class="tanbox" v-show="show">
      <div class="conte">
        <div class="tishi">
          <div>提示</div>
          <img src="../../../assets/images/false.png" @click="show = false" />
        </div>
        <div class="tk-main">
          <div class="shangc">{{ names }}</div>
          <div class="queding" @click="show = false">确定</div>
        </div>
      </div>
    </div>
    <van-popup v-model="btm_show" position="bottom">
      <div v-if="terminal === true" class="btm_tk_item" @click="sp">上传视频</div>
      <div class="btm_tk_item" @click="pz">拍照</div>
      <div class="btm_tk_item btm_tk_item-end" @click="xc">从手机相册选择</div>
      <div class="btm_tk_cancle" @click="btm_show = false">取消</div>
    </van-popup>
  </div>
</template>

<script>
  import upload from "../../../assets/js/upload_vue.js"
  import audio from "../../../assets/js/audio.js"
  import { Toast } from "vant";
  import terminal from "../../../assets/js/terminal";
  export default {
    name: 'trouble_list_change',
    data() {
      return {
        number: null,
        category: [],
        txtbxnr: '',
        btm_show: false,
        list_img: [],
        imgText: [],
        show_path: null,
        list_mv: [],
        id: 0,
        ids: 0,
        details: {},
        patrolId: 0,
        show: false,
        names: '',
        status: '',//1结束巡查  2结束巡查并生成隐患列表
        datas: {
          noweInfo: {
            imgurl: '',
            imgText: '',
            contractime: '',
            title: ''
          },
          rectificaContent: {
            contractime: ''
          }
        },
        isPlay: false,
        videoList: [],
        where: '',
        terminal: false
      };
    },
    components: {
      [Toast.name]: Toast
    },
    destroyed() {
      setTimeout(() => {
        this.$zoom.showImagesFn.hideContainer();
      })
    },
    mounted() {
      var _this = this;
      this.where = sessionStorage.getItem("goto");
      this.patrolId = Number(localStorage.getItem('patrolTroubleshootId'))
      this.id = this.$route.query.id;
      this.ids = this.$route.query.ids;
      console.log(this.ids)
      console.log(!this.ids)
      this.show_path = this.$global_msg.Url.hosts + '';
      this.queryDetails();
      this.terminal = terminal.terminals().android;
      this.ly();
      audio.init(this.mui);
      //切换后台
      document.addEventListener("pause", function () {
        _this.stopPlay();
      }, false);
      //物理返回
      // window.addEventListener("popstate", function(){
      //   _this.toback();
      // }, false);
    },
    methods: {
      changeS(index) {
        this.imgText[index] = this.imgText[index].replace(/,/, '，');
      },
      stopPlay() {
        audio.stop();
        this.$yy.stop();
        this.isPlay = false;
        this.$forceUpdate();
      },
      toback() {//返回
        this.stopPlay();
        this.$router.back();
      },
      //播放录音或停止播放录音
      play() {
        var _this = this;
        audio.stop();
        if (_this.isPlay) {
          _this.isPlay = false;
          _this.$forceUpdate();
        } else {
          _this.isPlay = true;
          _this.$forceUpdate();
          audio.play(_this.show_path + _this.datas.noweInfo.contract, function () {
            _this.isPlay = false;
            _this.$forceUpdate();
          }, function (msg) {
            _this.$toast(msg);
            _this.isPlay = false;
            _this.$forceUpdate();
          });
        }
      },
      //  查询详情
      queryDetails() {
        const that = this;
        const params = {
          patrolTroubleshoot: that.patrolId,
          patrolTroubleshootInfoId: that.id,
          type: 0
        }
        that.axios.get(`${that.$global_msg.Url.host}/partroInspection/selectDangerPointDes`,
          { params }).then(res => {
            console.log(res)
            let a = res.data.rows;
            that.datas = res.data.rows;
            if (res.data.code === 200) {
              if (a.rectificaContent !== null) {
                that.txtbxnr = a.rectificaContent.title;
                that.imgText = a.rectificaContent.imgText.split(',');
                if (res.data.rows.rectificaContent.contract !== '') {
                  $(".luru .ly_play").attr("data-url", this.show_path + res.data.rows.rectificaContent.contract)
                  $(".luru .ly_start").hide(); //隐藏录音按钮
                  $(".luru .ly_play").show(); //显示录音播放
                  // $(".luru .zhuan").addClass('yc')
                } else {
                  $(".luru").show(); //隐藏录音按钮
                }
                if (res.data.rows.rectificaContent.imgUrl !== '') {
                  let a = res.data.rows.rectificaContent.imgUrl.split(',');
                  a.map(res => {
                    this.list_img.push({
                      imgs: res
                    })
                  })
                }
                if (res.data.rows.rectificaContent.videoUrl !== '') {
                  console.log(res.data.rows.rectificaContent.videoUrl)
                  let a = res.data.rows.rectificaContent.videoUrl.split(',');
                  a.map(res => {
                    this.list_mv.push({
                      video: res
                    })
                  })
                }
              }
              if (a.noweInfo !== null) {
                that.videoList = a.noweInfo.videourl.split(',');
                if (a.noweInfo.contract !== '') {
                  $(".chakan .ly_play").attr("data-url", this.show_path + a.noweInfo.contract)
                  //$(".chakan .ly_start").hide(); //隐藏录音按钮
                  $(".chakan .ly_play").show(); //显示录音播放
                } else {
                  $(".chakan").hide(); //隐藏录音按钮
                }
              }
            } else {
              this.$toast(res.data.msg);
            }
          }).catch(error => {
            this.$terminal._error(error)
          });
      },
      //  语音
      ly() {
        let that = this;
        if (that.terminal !== true) {
          $(".yuyin_list").hide(); //隐藏录音按钮
        }
        this.$yy.ly_fun({
          play_img: require("../../../assets/images/play.png"),
          playing_img: require("../../../assets/images/play_dt.gif"),
          _this: this
        }, function (res) {
          that.txtbxnr += res
          if (that.txtbxnr.length >= 500) {
            // that.txtbxnr=res
            return that.$toast('文字限制在500字以内!')
          }
        });
      },
      //  删除录音
      clickDelete() {
        const that = this;
        const params = {
          patrolTroubleshoot: that.patrolId,
          patrolTroubleshootInfoId: that.id,
          deleteUrl: that.datas.rectificaContent.contract,
          type: 1
        }
        if (that.datas.rectificaContent.contract !== '') {
          that.axios.get(`${that.$global_msg.Url.host}/partroInspection/deleteVoice`,
            { params }).then(res => {
              console.log(res)
            })
        }
      },
      //  提交
      submit() {
        let that = this;
        let ly_file = $(".luru .ly_play").attr("data-url");
        let second = $(".luru .ly_s").html()
        if (that.txtbxnr === '' && ly_file === '') {
          that.names = '请填写巡查内容或按住语音说话'
          that.show = true;
        } else if (that.txtbxnr === '' && ly_file === undefined) {
          that.names = '请填写巡查内容或按住语音说话'
          that.show = true;
        } else if (that.list_img.length < 1 && that.list_mv.length < 1) {
          that.names = '请添加图片或上传视频'
          that.show = true;
        } else {
          that.updata_img(ly_file, second)
        }
      },
      updata_img(ly_file, second) {
        let that = this;
        plus.nativeUI.showWaiting("正在加载");
        let task = plus.uploader.createUpload(
          that.$global_msg.Url.host + '/partroInspection/saveRectificaContent',
          {
            method: "POST"
          },
          function (t, status) {
            // 上传完成
            let res = JSON.parse(t.responseText);
            console.log(res)
            if (status == 200) {
              plus.nativeUI.closeWaiting();
              if (res.code === 200) {
                that.stopPlay();
                that.$router.go(-1)
              } else {
                Toast('上传失败！')
              }
            }
          }
        );
        let a = ''
        that.list_img.map(res => {
          a += ',' + res.imgs;
        })
        let c = a.substring(1)
        let d = ''
        that.list_mv.map(res => {
          d += ',' + res.video;
        })
        let e = d.substring(1)
        task.addFile(ly_file, {
          key: "multipartFile"
        }); //上传的录音文件
        task.addData("imgurl", c + ""); //3.27that改为this
        task.addData("videourl", e + "");
        task.addData("title", that.txtbxnr + "");
        task.addData("patrolTroubleshootInfoId", Number(that.id) + "");
        task.addData("contractime", second + "");
        task.addData("imgText", that.imgText.toString());
        task.start();
      },

      stopMP() {
      },
      //  下拉框显示
      showPop() {
        this.btm_show = true
      },
      tost() {
        try {
          plus.nativeUI.closeWaiting();
        } catch (e) {
          console.log(e.message);
        }
      },
      choose(k, e) { // 类别选择
        console.warn(k)
        this.hidden = k
        $(e.target).parents(".leib_choos").children().removeClass('active');
        $(e.target).toggleClass("active")
      },
      pz() {//拍照
        let that = this;
        that.btm_show = false;
        upload.paizhao(function (path) {
          console.log(path);
          that.uploadImg(path);
        }, function (msg) {
          if (msg !== 'resultCode is wrong') {
            that.$toast(msg);
          }
        });
      },
      xc() {//相册
        let that = this;
        that.btm_show = false;
        upload.xiangce('image', true, function (path) {
          console.log(path);
          path.map(res => {
            that.uploadImg(res);
          })
        }, function (msg) {
          if (msg !== 'User cancelled') {
            that.$toast(msg);
          }
        });
      },
      uploadImg(path) {//上传图片
        let that = this;
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log(e.message);
        }
        let params = {};
        upload.uploadImg(that.$global_msg.Url.hosts + '/partroInspection/uploadImg', 'POST', params, path, 'multipartFile', function (data) {
          if (data.code == 200) {
            that.list_img.push({
              imgs: data.rows
            })
          } else {
            that.$toast(data.msg);
          }
          that.tost();
        }, function (msg) {
          that.$toast(msg);
          that.tost();
        });
      },
      sp() {//视频
        let that = this;
        that.btm_show = false;
        upload.record(function (path) {
          console.log(path);
          console.log(typeof path);
          // let a = Array.from(path)
          //获取视频信息
          // a.map(res => {
          plus.io.getVideoInfo({
            filePath: path,
            success: function (data) {
              console.log(data);
              console.log(data.duration)
              //视频时间15秒以内才上传
              if ((data.duration * 1) > 11) {
                that.$toast('上传的视频时间请在10秒以内');
                return;
              } else {
                that.uploadVideo(path);
              }
            },
            fail: function (e) {
              that.$toast(e.msg + '1111111');
            }
          });
          // })
        }, function (msg) {
          if (msg !== 'User cancelled') {
            that.$toast(msg);
          }
        });
      },
      uploadVideo(path) {//上传视频
        let that = this;
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log(e.message);
        }
        let params = {};
        upload.uploadVideo(that.$global_msg.Url.hosts + '/partroInspection/uploadMV', 'POST', params, path, 'multipartFile', function (data) {
          data = JSON.parse(data);
          if (data.code == 200) {
            that.list_mv.push({
              video: data.rows
            });
          } else {
            console.log(data);
            that.$toast(data.msg);
          }
          that.tost();
        }, function (msg) {
          that.$toast(msg);
          that.tost();
        });
      },
      showDesc(i) {//显示图片描述
        this.list_img[i].showDesc = !this.list_img[i].showDesc;
        this.$forceUpdate();
      },
      del(i, type) {//删除图片
        if (type == 'img') {
          if (this.list_img[i].id) {//不是新上传的图片
            this.delImg.push(this.list_img[i].id);
            this.list_img.splice(i, 1);
            this.imgText.splice(i, 1);
          } else {
            this.list_img.splice(i, 1);
            this.imgText.splice(i, 1);
          }
        } else {
          if (this.list_mv[i].id) {//不是新上传的视频
            this.delMv.push(this.list_mv[i].id);
            this.list_mv.splice(i, 1);
          } else {
            this.list_mv.splice(i, 1);
          }
        }
      },
    }
  }
</script>

<style scoped>
  * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  textarea {
    -webkit-user-select: auto !important;
    -khtml-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    user-select: auto !important;
  }

  .video-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%
  }

  /* 视频列表 */
  .video-list {
    padding-top: 0.259259rem;
    margin-bottom: 0.37037rem;
    width: 100%;
    height: auto;
    display: flex;
    position: relative;
    flex-direction: column;
    border-top: 1px #f2f2f2 solid;
  }

  .video-list video {
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    width: auto;
    height: 4.87037rem !important;
    margin-top: 0.259259rem;
  }

  .video-list video:first-child {
    margin-top: 0;
  }

  .video-list .del {
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0.925925rem;
    overflow: hidden;
  }

  .video-list .del img {
    width: 100%;
    height: 100%;
  }

  .tk-main {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 0;
  }

  .shangc {
    width: 80%;
    margin-bottom: 40px;
  }

  .queding {
    width: 30%;
    color: white;
    text-align: center;
    background-color: #2B6CFE;
    border-radius: 0.092592rem;
    padding: 20px 0;
  }

  .tishi {
    border-bottom: 0.018518rem solid #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0.5rem;
  }

  .tishi img {
    width: 0.4rem;
  }

  .conte {
    width: 70%;
    background: #FFFFFF;
    border-radius: 0.185185rem;
  }

  .tanbox {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .boxitem {
    /* height: 1.3889rem; */
    padding: 0px 0.3704rem;
    font-size: 0.3889rem;
    border-bottom: 1Px solid #f2f2f2;
    overflow: hidden;
  }

  .boxitem textarea {
    width: 100%;
    padding-top: 0.3704rem;
    height: 3.125rem;
    overflow: hidden;
  }

  .popup-box {
    padding: 10px;
  }

  .popup-boxs {
    padding: 0 10px 10px;
  }

  .van-popup {
    background-color: transparent;
  }

  .btm_tk_item {
    height: 1.3889rem;
    line-height: 1.3889rem;
    border-bottom: 1Px solid #f2f2f2;
    text-align: center;
    margin-left: 0.185185rem;
    margin-right: 0.185185rem;
    width: auto;
    background-color: #FFFFFF;
  }

  .btm_tk_item:first-child {
    border-radius: 0.148148rem 0.148148rem 0 0;
  }

  .btm_tk_item-end {
    border-radius: 0 0 0.148148rem 0.148148rem;
  }

  .btm_tk_cancle {
    font-weight: bolder;
    height: 1.3889rem;
    line-height: 1.3889rem;
    border-bottom: 1Px solid #f2f2f2;
    text-align: center;
    margin: 0.185185rem;
    width: auto;
    background-color: #FFFFFF;
    border-radius: 0.148148rem;
  }

  .leib_jdh {
    background: #EEEEEE;
    border-radius: 0.5rem;
    padding: 0.2rem 0.4rem;
    width: 20%;
    margin-bottom: 0.3rem;
    text-align: center;
  }

  .active {
    background-color: #2682FD;
    color: white;
  }

  .leib_choos {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0.3rem 0.5rem 0;
    border-bottom: 1px solid #f2f2f2;
  }

  .leibie {
    background: white;
  }

  .picture {
    background: #EEF3F7;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 3rem;
    width: 50%;
    margin: 0 20px;
    border-radius: 0.2rem;
  }

  .picture img {
    width: 1rem;
    margin-bottom: 0.3rem;
  }

  .voice {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0.8rem;
    width: 4rem;
    border: 1px solid #F7F7F9;
    color: #5F5D5C;
    margin: 0.3rem;
  }

  .voice img {
    margin-right: 0.2rem;
    width: 0.4rem;
  }

  .words {
    height: 4rem;
    width: 100%;
    border-bottom: 0.037037rem solid #F7F7F9;
  }

  .textarea {
    /* border: 1px solid red; */
    height: 3.5rem;
    width: 100%;
    text-indent: 0.3rem;
    padding: 10px 0
  }

  .xuncont {
    width: 100%;
    border-bottom: 0.037037rem solid #f2f2f2;
    padding: 30px 0.3rem;
    box-sizing: border-box;
  }

  .security {
    background-color: #FFFFFF;
    border-radius: 0.092592rem;
  }

  .button {
    width: 100%;
    height: 1rem;
    color: white;
    text-align: center;
    line-height: 1rem;
    background-color: #2B6CFE;
    border-radius: 0.105185rem;
  }

  .contant {
    margin-top: 1.8519rem;
    border: 1px solid white;
  }

  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  /* 图片列表 */
  .img-box {
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    margin-top: 0.74074rem;
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
  }

  .img-box .img-item {
    width: 4.481481rem;
    height: 2.814814rem;
    background-image: url('../../../assets/images/tianjia.png');
    background-size: 100% 100%;
    margin-bottom: 0.425925rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px #CCCCCC solid;
    border-radius: 30px;
  }

  /* 图片列表的内容和按钮 */
  .img-box .img-item .img-content {
    width: 100%;
    height: 2.814814rem;
    z-index: 10;
    background-color: #FFFFFF;
    position: relative;
  }

  .img-box .img-item .img-content .img-src {
    width: 100%;
    height: 100%;
    z-index: 11;
  }

  .img-box .img-item .img-content .img-group {
    width: 1.388888rem;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 12;
    border-left: 1px #FFFFFF solid;
    display: flex;
    flex-direction: column;
  }

  .img-box .img-item .img-content .img-group .img-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px #FFFFFF solid;
  }

  .img-box .img-item .img-content .img-group .img-btn:last-child {
    border-left: none;
  }

  .img-box .del-btn {
    color: #FFFFFF;
    font-size: 0.925925rem;
  }

  .img-box .desc-btn {
    color: #FFFFFF;
    font-size: 0.925925rem;
  }

  /* 图片列表的描述 */
  .img-box .show-desc {
    height: 3.703703rem;
  }

  .img-box .img-item .img-desc {
    width: 100%;
    height: 0.851851rem;
    text-align: center;
    flex: 1;
    background-color: #FFFFFF;
    display: none;
  }

  .img-box .show-desc .img-desc {
    display: block;
  }

  ul,
  li {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .img-list:first-child {
    margin-left: 4.814814rem;
  }

  .imgs_uls {
    margin-top: -3.255554rem;
    z-index: 2 !important;
  }

  .img_upload .img-item {
    z-index: 3 !important;
  }

  .yuyin_list {
    width: 100%;
    position: relative;
    display: flex;
    padding: 0.2315rem 0.3704rem;
    word-break: break-all;
    font-size: 0.3888888888888889rem;
    background-color: #fff;
    border-bottom: 1Px solid #f2f2f2;
    box-sizing: border-box;
  }

  .ly {
    width: 3.0185185185185186rem;
    height: 1rem;
    border: 1Px solid #f2f2f2;
    border-radius: 0.1111rem;
    display: flex;
    align-items: center;
    background-color: #fff;
    color: #757575;
    /* justify-content: center; */
  }

  .ly img {
    width: 0.3704rem;
    height: 0.5rem;
    margin: 0 0.2777777777777778rem;
    /* margin-right: 0.2777777777777778rem; */
  }

  .ly_play .ly>span {
    float: right;
    /* margin: 0.282222rem 0.9259259259259259rem 0 0; */
  }

  .ly_start .ly>span {
    float: right;
    /* margin: 0.2037037037037037rem 0.46296296296296297rem 0 0; */
  }

  .del_ly,
  .zhuan {
    width: 0.8518518518518519rem;
    margin: 0.09259259259259259rem 0 0 0.23148148148148148rem;
    height: 0.8518518518518519rem;
  }

  .ly_tc {
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    height: 3.7037037037037037rem;
    width: 3.7037037037037037rem;
    border-radius: 0.18518518518518517rem;
    text-align: center;
    z-index: 2000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 0.3888888888888889rem;
    display: none;
  }

  .ly_tc>img {
    margin: 1rem auto 0 auto;
    width: 1.5rem;
  }

  .yc {
    display: none;
  }

  .ly_play>div {
    display: flex;
  }

  .ly_play {
    display: none;
  }

  .actives {
    pointer-events: none;
  }

  .img-box-main {
    border: 1px #CCCCCC solid;
    border-radius: 30px;
    overflow: hidden;
  }

  .img-box-list {
    height: 2.814814rem;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
    display: flex;
  }

  .imgs {
    width: 100%;
    height: 100%;
    z-index: 11;
    object-fit: cover;
  }

  .img-li {
    width: 47%;
    padding: 10px;
  }

  .img-btns {
    height: 100%;
  }

  .del-btns {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 78px;
  }

  .img-groups {
    width: 1.388888rem;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 12;
    border-left: 1px #FFFFFF solid;
    display: flex;
    flex-direction: column;
  }

  .lists {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .lists1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .imgs_ul-list {
    width: 100%;
    padding: 0.3rem 0.4rem;
  }

  .imglist-title {
    display: flex;
    text-align: justify;
    text-justify: newspaper;
    word-break: break-all;
    justify-content: flex-start;
  }
</style>